<template>
  <div>
    <div class="scoreout">
      <div class="td-dec-score">
        <div class="score-title">
          <img src="/images/favicon.ico" alt="">
          <span>猫眼用户评分</span>
        </div>
        <div class="score-con">
          <div class="con-left">
            <p>{{score}}
              <span>推荐</span>
            </p>
            <p>{{performanceId}}人评分</p>
          </div>
          <div class="con-right">
            <div class="righttext">
              <van-swipe style="height: 100%" :show-indicators="false" autoplay="1500" vertical>
                <van-swipe-item>
                  <div class="siperClumn">交通很方便,而且演出也很精彩,演员的功底也很扎实</div>
                </van-swipe-item>
                <van-swipe-item>
                  <div class="siperClumn">还不错。</div>
                </van-swipe-item>
                <van-swipe-item>
                  <div class="siperClumn">试营业期间,优惠力度很大,现场气氛不错。</div>
                </van-swipe-item>
                <van-swipe-item>
                  <div class="siperClumn">推荐看看</div>
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import getLink from "@/api/getLink.js";
// export default {
import getLinkData from '@/api/getLinkData.js'
export default {
  data() {
    return {
      score: '',
      performanceId: ''
    }
  },
  mounted() {
    getLinkData('/apidl/foryouDec', 'GET', {
      id: this.$route.query.id
    }).then(res => {
      this.score = res.data.score
      this.performanceId = res.data.performanceId
    })
  }
}
</script>
<style scoped>
.scoreout {
  width: 100%;
  background-image: linear-gradient(to right, #2a294a, #44435f, #2a294a);
  padding-bottom: 0.2rem;
}
.td-dec-score {
  overflow: hidden;
  width: 90%;
  margin: auto;
  height: 2rem;
  background-color: #201f3b;
  border-radius: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score-title {
  width: 100%;
  height: 0.4rem;
  padding: 0.2rem 0 0.1rem 0.2rem;
  font-size: 0.26rem;
  color: #ffffff;
  /* background-color: bisque; */
}
.score-title img {
  width: 0.32rem;
  vertical-align: bottom;
}
.score-con {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  height: 1.84rem;
}
.score-con .con-left {
  width: 2rem;
  /* background-color: aqua; */
  text-align: center;
  margin: 0.1rem auto;
}
.score-con .con-left p:nth-child(1) {
  color: #ffb400;
  font-size: 0.5rem;
  font-family: 'Times New Roman', Times, serif;
  border-right: 1px solid #babac3;
  margin-bottom: 0.1rem;
}
.score-con .con-left p:nth-child(2) {
  color: #babac3;
  font-size: 0.24rem;
  border-right: 1px solid #babac3;
}
.score-con .con-right {
  height: 2rem;
  width: 4.2rem;
  /* background-color: brown; */
  font-size: 0.26rem;
  color: #ffffff;
}
.righttext {
  height: 100%;
  /* background-color: #ffb400; */
}
.swiperClumn {
  line-height: 2rem;
}
</style>